const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
//启用热更新的第二步
//导入在内存中生成的HTML页面的插件
//只要是插件，都一定要放到plugins节点中去
//这个插件的两个作用：
//  1. 自动在内存中根据指定页面生成一个内存的页面
//  2. 自动把打包好的bundle.js追加到页面中去
module.exports={
    //在配置文件中，需要知手动指定入口和出口
    entry:path.join(__dirname,"./src/main.js"), //入口，表示，要使用webpack打包哪个文件
    output: {  //输出文件相关的配置
        path: path.join(__dirname, "./dist"),  //指定打包好的文件，输出到哪个目录中去
        filename: "bundle.js"  //这是指定 输出的文件的名称
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename: 'index.html'
        })
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader'] }, // 配置处理less文件的规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] }, // 配置 处理 scss 文件的规则
            {test:/\.(jpg|png|jpeg|bmp|gif)$/,use:'url-loader'},
            {test:/\.(eot|svg|ttf|woff|woff2)$/,use:'url-loader'},
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            {test:/\.vue$/,use:'vue-loader'}
        ]
    }
}
//当我们在控制台,直接输入webpack命令执行的时候, webpack 做了以下几步:
// 1.首先, webpack 发现,我们并没有通过命令的形式,给它指定入口和出口
// 2. webpack 就会去项目的根目录中,查找一个叫做、 webpack . config.js、的配置文件
// 3.当找到配置文件后, webpack 会去解析执行这个配置文件,当解析执行完配置文件后,就得到了配文件中,导出的配对象
//4.当webpack拿到配置对象后,就拿到了配对象中,指定的入口和出口,然后进行打包构建;
